<template>
<div style="margin-top: 100px">
  <a-row justify="center">
    <a-col :xs="{ span: 22 }" :sm="{ span: 21 }" :md="{ span: 19 }" :lg="{ span: 14 }" :xxl="{ span: 12 }">
      <h1>留言簿:</h1>
      <a-text-area v-model:value="msg" placeholder="请输入你的建议或意见......" allow-clear show-count :maxlength="300" />
      <div style="margin-top: 30px; float: right;">
        <a-button type="primary" ghost @click="submitMsg" :disabled="disableBtn">发送</a-button>
      </div>
    </a-col>
  </a-row>
  <Footer />
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Footer from '@/components/Footer.vue'
import { Input, Row, Col, Button, message } from 'ant-design-vue'
import { addMsg } from '@/service'
import { MessageSend } from '@/utils/ds'
import { getUserName } from '@/utils/check'

export default defineComponent({
  name: 'LeaveMessage',
  components: {
    Footer,
    ATextArea: Input.TextArea,
    ARow: Row,
    ACol: Col,
    AButton: Button
  },
  setup () {
    const msg = ref<string>('')
    const prevMsg = ref<string>('')
    const disableBtn = ref<boolean>(false)
    const submitMsg = () => {
      if (msg.value === '') {
        message.info('您还未填写留言')
        return
      }
      if (msg.value === prevMsg.value) {
        message.info('刚刚的留言已经提交 无需重复提交')
        return
      }
      disableBtn.value = true
      const sendData: MessageSend = {
        msg: msg.value,
        senderName: getUserName(),
        receiver: 2
      }
      addMsg(sendData)
        .then((response) => {
          if (response.status !== 200) {
            message.warn('网络请求出错')
            disableBtn.value = false
            return
          }
          const resp = response.data
          if (resp.code !== 0) {
            message.warn('服务端处理出错')
            disableBtn.value = false
            return
          }
          if (resp.data !== null && resp.data === true) {
            message.info('提交成功')
            prevMsg.value = msg.value
          }
          disableBtn.value = false
        })
    }
    return {
      msg,
      disableBtn,
      submitMsg
    }
  }
})
</script>

<style scoped>

</style>
